<template>
  <div class="setting-view">
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="1.5" class="sys-title">登录背景图</el-col>
        <el-col :span="20">
          <el-upload
            class="avatar-uploader"
            action
            :auto-upload="false"
            :before-upload="beforeUpload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="getFile"
            list-type="picture-card"
            
          >
            <div  class="upload-before-container">
              <div class="textbox">
                <span class="txt addicon">
                  <img src="../../assets/upload-icon.png" alt />
                </span>
                <span class="txt">建议上传尺寸</span>
                <span class="txt">1920*1080</span>
                <span class="txt">(上传格式：jpg/png/svg)</span>
              </div>
            </div>
          </el-upload>
        </el-col>
      </el-row>
       <el-dialog :visible.sync="dialogVisible" append-to-body>
    <img width="100%" :src="dialogImageUrl" alt />
  </el-dialog>
    </div>
  </div>
</template>

<script>
import { getBanner, uploadBanner } from "@/api/banner";
import { getBase64, previewFileAddress } from "@/utils/index";

export default {
  name: "Setting",
  data() {
    return {
      fileList: [],
      dialogImageUrl:'',
       dialogVisible: false,
    };
  },
  created() {
  console.log();
    this.getBannerSet();
  },
  methods: {
    getBannerSet() {
      getBanner()
        .then(res => {
          const url = process.env.VUE_APP_BASE_API + res.banner.url;
          // console.log(url);
          this.fileList = [{ name: res.banner.id, url }];
        })
        .catch(err => {
          console.error("获取背景图信息失败", err);
          this.$message.error("获取背景图信息失败，请稍后再试！");
        });
    },
    getFile(file) {
      if (this.beforeUpload(file.raw)) {
        const formData = new FormData();
        formData.append("file", file.raw);

        uploadBanner(formData)
          .then(result => {})
          .catch(error => {
            console.error("上传失败", error);
            this.$message.error("上传失败，请检查网络连接或文件格式大小！");
          });
      }
    },
    beforeUpload(file) {
      const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
      const isValidType = allowedTypes.includes(file.type);
      const isLt10M = file.size / 1024 / 1024 < 10; // 确保文件大小不超过10MB

      if (!isValidType) {
        this.$message.warning("上传图片只能是 jpeg、jpg、png 格式!");
      }
      if (!isLt10M) {
        this.$message.warning("上传图片大小不能超过 10MB!");
      }
      return isValidType && isLt10M;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url || file.response || file.raw;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning("最多只能上传一张图片");
    }
  }
};
</script>

<style  lang="scss" scoped>
.setting-view {
  .container {
    margin: 40px 45px;
    .sys-title {
      margin-top: 12px;
      font-weight: bold;
      font-size: 16px;
      color: #4d4d4d;
      line-height: 29px;
    }

    .upload-before-container {
      width: 300px;
      height: 240px;
      position: relative;
      .textbox {
        position: absolute;
        width: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .addicon {
        margin: 12px auto;
        width: 50px;
        height: 50px;
      }
      .txt {
        display: block;
        font-size: 14px;
        color: #666666;
        line-height: 21px;
      }
    }
  }
}
::v-deep .el-upload-list--picture-card .el-upload-list__item,
::v-deep .el-upload {
  width: 300px;
  height: 240px;
  background: #f5f5f5;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
}
</style>
